<template>
  <view>
    <view>
      <input type="number" v-model="orderId" placeholder="Enter Order ID" />
      <button @click="chooseFile">选择文件</button>
      <button @click="uploadFile" :disabled="!selectedFile">上传文件</button>
    </view>
   
  </view>
</template>

<script setup>
import { ref, defineProps } from 'vue';

const props = defineProps({
  information: {
    type: Object,
    required: true,
    default: () => [] // 提供一个默认空数组，以防没有传入数据
  }
});
 
// 创建响应式引用并初始化
const imageUrl = ref(); // 使用默认值以防 delivery 未定义
const orderId = ref();
const selectedFile = ref(null);
const uploadMessage = ref('');


function chooseFile() {
  uni.chooseFile({
    count: 1, // 默认9
    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
    success: (res) => {
      selectedFile.value = res.tempFiles[0];
      console.log(selectedFile.value);
    }
  });
}

async function uploadFile() {
  if (!orderId.value) {
    uni.showToast({
      title: '请输入订单ID',
      icon: 'none'
    });
    return;
  }

  if (!selectedFile.value) {
    uni.showToast({
      title: '请选择文件',
      icon: 'none'
    });
    return;
  }

  uni.uploadFile({
    url: 'http://localhost:8080/orders/upload', // 替换为你的后端地址
    filePath: selectedFile.value.path,
    name: 'file',
    formData: {
      id: orderId.value.toString() // 确保传递的 id 是字符串
    },
    success: (uploadRes) => {
      if (uploadRes.statusCode === 200) {
        uni.showToast({
          title: '上传成功',
          icon: 'success',
		 
        });
		 console.log(props)
        uploadMessage.value = '文件上传成功';
        fetchImage(orderId.value);
      } else {
        uni.showToast({
          title: '上传失败',
          icon: 'none'
        });
        uploadMessage.value = '文件上传失败';
      }
    },
    fail: (err) => {
      console.error(err);
      uni.showToast({
        title: '上传失败',
        icon: 'none'
      });
      uploadMessage.value = '文件上传失败';
    }
  });
}

async function fetchImage(id) {
  try {
    const response = await uni.request({
      url: `http://localhost:8080/orders/download/${id}`, // 替换为你的后端地址
      method: 'GET',
      responseType: 'arraybuffer' // 设置响应类型为 arraybuffer
    });

    if (response.statusCode === 200) {
      const base64 = uni.arrayBufferToBase64(response.data);
      imageUrl.value = `data:image/jpeg;base64,${base64}`;
	  // console.log(  imageUrl.value)
    } else {
      console.error('获取图片失败:', response.data);
      uni.showToast({
        title: '获取图片失败',
        icon: 'none'
      });
    }
  } catch (error) {
    console.error('获取图片时出错:', error);
    uni.showToast({
      title: '获取图片失败',
      icon: 'none'
    });
  }
}
</script>

<style lang="scss">
.container {
  .section-container {
    .example-body {
      width: 100%;
      margin-left: 30%;
      margin-bottom: 20rpx;
    }
  }
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

input[type="file"] {
  margin-bottom: 10px;
}

button {
  margin-bottom: 20px;
}

text {
  margin-bottom: 20px;
}

image {
  max-width: 100%;
  height: auto;
}
</style>
